import './Detail.less'
import { SafeArea,Badge,Toast } from 'antd-mobile'
import { LeftOutline,MessageOutline,LikeOutline,StarOutline,MoreOutline } from 'antd-mobile-icons'
import * as api from '../api/index'
import SkeletonAgain from "../components/SkeletonAgain";
import { useEffect, useMemo, useState } from 'react';
import{ connect } from 'react-redux'
import action from '../store/action';

const Detail = function Detail(props){
    //console.log(props,'detail');
    let { navigate,params } = props
    //定义状态
    let [info,setInfo] = useState(null),
        [extra,setExtra] = useState(null) //获取新闻点赞信息
    let link
    /* const handleStyle = ()=>{
        const { css } = res
        if(!Array.isArray(css)) return;
        css = css[0]
        link = document.createElement('link')
        link.rel = 'stylesheet'
        link.href = css
        document.head.appendChild(link)
    } */
    useEffect(()=>{
        (async ()=>{
            try{
                let res = await api.queryNewsInfo(params.id)
                setInfo(res)
            }catch(e){}
        })()
        return ()=>{
            if(link) document.head.removeChild(link)
        }
    },[])
    useEffect(()=>{
        (async ()=>{
            try{
                let res = await api.queryStoryExtra(params.id)
                setExtra(res) // {}
            }catch(e){}
        })()
    },[])

    //=========================关于登录和收藏
    let { 
          base:{info:userInfo},queryUserInfoAsync,
          location,
          store:{list:storeList},queryStoreListAsync,removeStoreListById 
        } = props;
    const handleStore = async ()=>{ 
        if(!userInfo){ 
            Toast.show({
                icon:'fail',
                content:'请先登录'
            })
            navigate(`/login?to=${location.pathname}`,{replace:true})
            // navigate(`/login?to=${location.pathname}`)
            return;
        }
        //移除收藏
        if(isStore){ 
            let item = storeList.find(item => {
                return +item.news.id === +params.id
            })
            if(!item) return;
            let { code } = await api.storeRemove(item.id)
            if(+code !== 0){
                Toast.show({
                    icon:'fail',
                    content:'操作失败'
                })
            }
            Toast.show({
                icon:'success',
                content:'操作成功'
            })
            removeStoreListById(item.id) 
            return
        }
        //收藏
        try{
            let { code } = await api.store(params.id)
            if(+code !== 0){
                Toast.show({
                    icon:'fail',
                    content:'收藏失败'
                })
            }
            Toast.show({
                icon:'success',
                content:'收藏成功'
            })
            queryStoreListAsync() 
        }catch(e){}
    }

    useEffect(()=>{
        (async ()=>{
            if(!userInfo){
                let { info } = await queryUserInfoAsync()
                userInfo = info
            }
            if(userInfo && !storeList){
                queryStoreListAsync()
            }
        })()
    },[])

    const isStore = useMemo(()=>{
        if(!storeList) return false
        return storeList.some(item => {
            return +item.news.id === +params.id
        })
    },[storeList,params])

    return <div className="detail-box">
        {/* 如果想把内容中的HTML字符串识别为标签，需要基于dangerouslySetInnerHTML!! */}
        {!info ? <SkeletonAgain /> : <div className="content"
            dangerouslySetInnerHTML={{
                __html:info.body
            }}
        >
        </div>}
        {/* 底部图标 */} 
        <div className="tab-bar">
            <div className="back" onClick={()=>{ navigate(-1) }}><LeftOutline /></div>
            <div className="icons">
                <Badge content={extra ? extra.comments : 0}><MessageOutline /></Badge>
                <Badge content={extra ? extra.popularity : 0}><LikeOutline /></Badge>
                <span className={isStore ? 'stored' : ''} onClick={handleStore}><StarOutline /></span>
                <span><MoreOutline /></span>
            </div>
        </div>
        {/* 安全区 */}
        <SafeArea position="bottom" />
    </div>
}
export default connect(state => state,{...action.base, ...action.store})(Detail)